<template>
  <div class="course-view">
    <div class="course-header">
      <h2>课程信息</h2>
    </div>

    <el-table :data="courseStore.courses">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="title" label="课程名称" width="200"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column prop="teacherId" label="教师姓名" width="120">
        <template #default="{ row }">
          {{ getTeacherName(row.teacherId) }}
        </template>
      </el-table-column>
      <el-table-column prop="category" label="分类" width="120"></el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button
            type="success"
            size="small"
            @click="joinCourse(row)"
            :disabled="getJoinStatus(row.id) !== 'NOT_JOINED'"
            :icon="Plus"
          >{{ getJoinStatus(row.id) === 'PENDING' ? '申请中' : getJoinStatus(row.id) === 'APPROVED' ? '已加入' : '可加入' }}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { useCourseStore } from '@/stores/api/course';
import { useCourseJoinStore } from '@/stores/api/course-join';
import { useUserStore } from '@/stores/api/user';
import { ElMessage } from 'element-plus';

const courseStore = useCourseStore();
const courseJoinStore = useCourseJoinStore();
const userStore = useUserStore();

const joinStatus = ref({});

const getTeacherName = (teacherId: number) => {
  const teacher = userStore.users.find(t => t.id === teacherId);
  return teacher ? teacher.realName : '未知';
};

const getJoinStatus = (courseId: number) => {
  return joinStatus.value[courseId] || 'NOT_JOINED';
};

const joinCourse = async (course: any) => {
  try {
    if (!userStore.user?.id) {
      ElMessage.error('请先登录');
      return;
    }
    await courseJoinStore.joinCourse({
      courseId: course.id,
      studentId: userStore.user.id
    });
    joinStatus.value[course.id] = 'PENDING';
  } catch (error) {
    ElMessage.error('申请加入课程失败');
  }
};

const fetchJoinStatus = async () => {
  if (!userStore.user?.id) return;
  try {
    const joins = await courseJoinStore.fetchJoinRequestsByStudent(userStore.user.id);
    joins.forEach((join: any) => {
      joinStatus.value[join.courseId] = join.status;
    });
  } catch (error) {
    ElMessage.error('获取加入状态失败');
  }
};

onMounted(() => {
  courseStore.fetchCourses();
  fetchJoinStatus();
});
</script>

<style scoped>
.course-view {
  width: 80%;
  margin: 40px auto 0 auto;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.course-header h2 {
  font-size: 24px;
  color: #333;
  flex-grow: 1;
  text-align: center;
}

.course-view .el-table {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>